<!--
    Desenvolvido pela Fábrica de Software do CESUPA.
    Todos os direitos reservados.

    @author Breno Leite
    @author Jorge Carvalho
-->

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:c="http://java.sun.com/jstl/core"
      xmlns:appcommons="http://www.fabsoft.cesupa.br/appcommons"
      xmlns:u3="http://www.fabsoft.cesupa.br/appcommons"
      xmlns:u2="http://www.fabsoft.cesupa.br/appcommons">

    <ui:composition template="/templates/light-template.xhtml">
        <ui:param name="pagetitle" value="Bem-vindo ao [nome do sistema]"/>
        <ui:param name="pagekeywords" value="login, senha perdida, cadastro"/>
        <ui:param name="pagedescription" value="Página inicial do sistema"/>
        <ui:param name="initialpage" value="true"/>

        <ui:define name="onpageload">
            Nifty("div#footer,div#topo-titulo,div#status", "small");
            setFocusAtElement('login-form:email-field');
        </ui:define>

        <ui:define name="styles">
            div#login{
            border:1px solid #97B7E1;
            }

            div#features{
            clear:left;
            }

            .email-field, .password-field{
            padding:6px 0px 6px 25px;
            width:80%;
            }

            .email-field {
            background:transparent url(#{facesContext.externalContext.request.contextPath}/images/icons/email-16x16.gif) no-repeat 2% 50%;
            background-color:white;
            }
            .password-field{
            background:transparent url(#{facesContext.externalContext.request.contextPath}/images/icons/key-16x16.gif) no-repeat 2% 50%;
            background-color:white;
            }

            div#functions-area{
            margin-right:390px;
            clear:left;
            }

            div#functions-area h3{
            font-weight:bold;
            letter-spacing:1px;
            font-size:small;
            color:blue;
            }

            div#functions-area p{
            line-height:1.5em;
            }

            div#functions-area img{
            float:left;
            margin-right:10px;
            }

            .featured-form{
            background-color:white;
            margin:3px;
            }
        </ui:define>

        <ui:define name="content">
            <div id="controls">
                <div class="extra-options" id="signup">
                    <div>
                        <form>
                            Novo por aqui? <a href="#">Cadastre-se</a>, é grátis.
                        </form>
                    </div>
                </div>

                <br/>
                <div id="login">
                    <form jsfc="h:form" class="featured-form" id="login-form">
                        <div style="font-size:medium;background-color:#97B7E1;color:white;padding:3px;">
                            <table>
                                <tr>
                                    <td width="20px">
                                        <h:graphicImage url="/images/icons/user-16x16.gif"
                                                        alt="login icon"/>
                                    </td>
                                    <td>
                                        <span style="letter-spacing:2px;font-weight:bold;">#{messages.EnterSystem}</span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <br />
                        <table class="custom-table" border="0" style="padding:2px;width:100%;">
                            <tr>
                                <td valign="top" style="width:100px;">
                                    <label for="email-field">#{words.EMail}:</label><br/>
                                    <span style="color:red;font-size:x-small;">Obrigatório</span>
                                </td>
                                <td valign="top">
                                    <h:inputText styleClass="special-textfield email-field text-field keyboardInput"
                                                 id="email-field" required="true" label="#{words.EMail}"
                                                 accesskey="e">

                                    </h:inputText><br/>
                                    <appcommons:fieldMessage type="validation" for="email-field"/>
                                </td>
                            </tr>
                            <tr valign="top">
                                <td valign="top" style="width:100px;">
                                    <label for="password-field">#{words.Password}:</label><br/>
                                    <span style="color:red;font-size:x-small;">Obrigatório</span>
                                </td>
                                <td valign="top">
                                    <h:inputSecret id="password-field"
                                                   styleClass="special-textfield text-field keyboardInput password-field"
                                                   required="true" label="#{words.Password}"
                                                   accesskey="s">

                                    </h:inputSecret><br/>
                                    <appcommons:fieldMessage type="validation" for="password-field"/>
                                </td>
                            </tr>
                        </table>
                        <br/>
                        <div class="buttons" style="float:right;">
                            <a accesskey="e" id="enter-button" jsfc="h:commandLink"
                               action="#{LoginBean.enterSystem}" class="positive primarybutton"
                               title="#{messages.EnterSystem}">
                                #{words.Enter}
                            </a>

                            <button title="#{tooltipmessages.CleanFields}"
                                    accesskey="l" type="reset">
                                #{words.Clean}
                            </button>
                        </div>
                        <br/><br/>
                    </form>

                </div>
                <br/>
                <div class="extra-options" id="lost-password">
                    <div>
                        <form>
                            <a href="#">Esqueceu sua senha?</a>
                        </form>
                    </div>
                </div>
                <br/>
            </div>
            <div id="functions-area">
                <h2>Breve descrição do software. Phasellus consequat felis sit
                    amet dolor accumsan vulputate. Fusce fermentum urna nec dolor
                    dapibus non vestibulum neque fermentum. Sed quis ligula felis,
                    nec semper velit.</h2>
                <br />
                <img alt="#{altmessages.FuncImage}" src="#{facesContext.externalContext.request.contextPath}/images/placeholder-img.gif" border="0"/>
                <h3>Funcionalidade 1</h3>
                <p>Etiam tincidunt vehicula adipiscing. Phasellus consequat felis sit amet dolor accumsan vulputate. Fusce fermentum urna nec dolor dapibus non vestibulum neque fermentum. Sed quis ligula felis, nec semper velit.</p>
                <br />
                <img alt="#{altmessages.FuncImage}" src="#{facesContext.externalContext.request.contextPath}/images/placeholder-img.gif" border="0"/>
                <h3>Funcionalidade 2</h3>
                <p>Cras quis nisi a diam facilisis ullamcorper. Duis suscipit libero vel sapien tempus viverra. Nulla scelerisque elementum quam tincidunt facilisis. Vestibulum fermentum magna nec dui ullamcorper tempus. Nulla facilisi. </p>
                <br/>
                <img alt="#{altmessages.FuncImage}" src="#{facesContext.externalContext.request.contextPath}/images/placeholder-img.gif" border="0"/>
                <h3>Funcionalidade 2</h3>
                <p>Cras quis nisi a diam facilisis ullamcorper. Duis suscipit libero vel sapien tempus viverra. Nulla scelerisque elementum quam tincidunt facilisis. Vestibulum fermentum magna nec dui ullamcorper tempus. Nulla facilisi. </p>
            </div>
        </ui:define><!--fecha define conteudo-->
    </ui:composition>
</html>
